<script>
import {listMerchant, listMerchantRank} from "@/api/carService/merchant";

export default {
  data(){
    return{
      merchantList:[],
      total:0,
      loading:false,
      queryParams:{
        pageNum:1,
        pageSize:10,
        merchantName:null,
        status:null
      },
      value2:null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900']
    }
  },
  created() {
    this.getList();
  },
  methods:{
    getList() {
      this.loading = true;
      listMerchantRank(this.queryParams).then(response => {
        this.value2 = response.rows[0].rate;
        this.merchantList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
}
}
</script>

<template>
<div class="di">
  <div class="biankuang">
  <div class="top1">商户排名</div>
    <el-table v-loading="loading" :data="merchantList" border fit highlight-current-row >
      <el-table-column type="selection" width="55" align="center" />
      <!-- 序号列 -->
      <el-table-column label="排名" align="center" width="60">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="店铺名称" align="center" prop="merchantName"/>
      <el-table-column label="详细地址" align="center" >
        <template slot-scope="scope">
          {{ scope.row.province }}{{scope.row.city}}{{scope.row.district}}{{scope.row.address}}
        </template>
      </el-table-column>
      <el-table-column label="负责人" align="center">
        <template slot-scope="scope">
          {{ scope.row.merchantVerification.director }}{{scope.row.merchantVerification.mobile}}
        </template>
      </el-table-column>

      <el-table-column label="平均星级" align="center" prop="name">
        <template #default="scope">
          <el-rate
            v-model="scope.row.rate"
            disabled
            :colors="colors"
          ></el-rate>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    </div>
</div>
</template>

<style scoped lang="scss">
.biankuang{
  width: 95%;
  height: 700px;
  border: solid 1px #d5d5d5;
  margin: 20px auto;
}
.top1{
  margin-left: 15px;
  margin-top: 10px;
margin-bottom: 10px;
}
</style>
